<template>
  <el-container class="drill-setting">
    <el-main class="main-select-body bgfff">
      <div class="table-bg"></div>
      <el-table
        :data="tableData"
        :height="tableHeight"
        v-loading="loading"
        @row-dblclick="dialogEdit"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column width="70" align="center" type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
        <el-table-column :label="$t('base.table.action')">
          <template slot-scope="scope">
            <el-button type="text" @click="onSetting(scope.row)">演习设置</el-button>
            <el-button
              type="text"
              @click="onPublish(scope.row)"
            >{{ scope.row.maneuverReleaseStatus == 0 ? '发布' : '取消发布'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="changePageNo"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </el-main>
    <el-dialog
      append-to-body
      width="800px"
      :title="title"
      :visible.sync="dialogValue"
      @close="dialogValue = false"
      custom-class="drill-setting-dialog"
    >
      <el-form
        ref="formRef"
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="计划演习时间" prop="planManeuverTime">
          <el-date-picker
            type="datetime"
            value-format="timestamp"
            v-model="ruleForm.planManeuverTime"
          ></el-date-picker>
        </el-form-item>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色及组员" name="1">
            <div class="fl-r">
              <el-card class="card-left" shadow="never">
                <div slot="header" class="card-left-header">
                  <span>角色</span>
                  <el-button type="text" icon="el-icon-plus" @click="handleAddRole"></el-button>
                </div>
                <div class="role-list">
                  <div
                    v-for="role in ruleForm.participants"
                    :key="role.id"
                    @click="handleChangeRole(role.teamName)"
                    :class="['role-item', currentRole === role.teamName ? 'is-active' : '']"
                  >
                    <span>{{ role.teamName }}</span>
                    <el-popover placement="bottom" width="150" trigger="click">
                      <div>
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          @click="handleEditRole(role.teamName)"
                        >编辑名称</el-button>
                        <div></div>
                        <el-button
                          type="text"
                          icon="el-icon-delete"
                          @click="handleDeleteRole(role.teamName)"
                        >删除角色</el-button>
                      </div>
                      <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
                    </el-popover>
                  </div>
                </div>
              </el-card>
              <el-card class="card-right" shadow="never">
                <div slot="header" class="card-right-header">
                  <span>人员总数 ({{totalPersonlsSize}})</span>
                    <el-button type="text" icon="el-icon-plus" @click="handleAddGroup"></el-button>
                </div>
                <div class="card-right-header2">
                  <span style="width: 59px;text-align: center">组</span>
                  <span style="flex-grow: 1;text-align: left">姓名</span>
                  <span style="width: 59px;text-align: center">操作</span>
                </div>
                <div class="personl-list">
                  <div class="personl-item" v-for="(group,index) in currentRoleGroups" :key="index">
                    <span style="flex-shrink: 0;width: 59px;text-align: center">{{ index + 1 }}</span>
                    <span style="width: 400px;display: inline-block;flex-grow: 1;text-align: left" class="fl-r">
                      <el-tag
                        style="margin-right: 5px;margin-bottom: 5px"
                        closable
                        type="info"
                        v-for="(tag,tagIndex) in group.participantIds"
                        :key="tag.id"
                        @close="handleCloseTag(index,tagIndex)"
                      >{{ tag.name }}</el-tag>
                    </span>
                    <el-popover
                      v-model="group.show"
                      popper-class="add-personl-popover"
                      placement="left-start"
                      width="300"
                      @hide="hideEditPersonl"
                      @show="showEditPersonl(group)"
                      trigger="click"
                    >
                      <el-select
                        v-model="groupOrgId"
                        placeholder="请选择机构"
                        @change="handleChangeGroupOrg"
                        style="margin-bottom: 10px"
                      >
                        <el-option
                          v-for="item in orgList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <el-input
                        v-model="searchPersonl"
                        @input="handleEditSearchInput"
                        placeholder="搜索"
                      ></el-input>
                      <div style="height: 200px;overflow: auto">
                        <el-checkbox-group
                          style="display: flex;flex-direction: column"
                          v-model="personlCheckList"
                        >
                          <el-checkbox
                            v-for="personl in personlShowList"
                            :key="personl.id"
                            :label="personl.id"
                          >{{ personl.name }}</el-checkbox>
                        </el-checkbox-group>
                      </div>
                      <div style="border-top: 1px solid #EBEEF5;margin-top: 9px"></div>
                      <el-button
                        style="width: 100%;color: #fff;margin-top: 8px"
                        type="primary"
                        @click="handleEditSavePersonl(group)"
                      >确定</el-button>
                      <el-button
                        slot="reference"
                        style="font-size: 16px"
                        type="text"
                        icon="el-icon-circle-plus-outline"
                      ></el-button>
                    </el-popover>
                    <el-button
                      style="width: 59px;text-align: center;flex-shrink: 0"
                      type="text"
                      @click="handleDeleteGroup(index)"
                    >删除</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="导调人员" name="2">
            <el-card shadow="never">
              <div style="display: flex;flex-direction: column">
                <el-select
                  v-model="daodiaoOrgId"
                  placeholder="请选择机构"
                  @change="handleChangeDaodiaoOrg"
                  style="margin-bottom: 10px"
                >
                  <el-option
                    v-for="item in orgList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="daodiaoSearchInput"
                  @input="handleDaodiaoSearch"
                  placeholder="搜索"
                ></el-input>
                <div style="flex-grow: 1;overflow: auto">
                  <el-checkbox-group v-model="ruleForm.directorIds">
                    <el-checkbox
                      v-for="personl in daodiaoPersonlShowList"
                      :key="personl.id"
                      :label="personl.id"
                    >{{ personl.name }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="观战人员" name="3">
            <el-card shadow="never">
              <div style="display: flex;flex-direction: column">
                <el-select
                  v-model="guanzhanOrgId"
                  placeholder="请选择机构"
                  @change="handleChangeGuanzhanOrg"
                  style="margin-bottom: 10px"
                >
                  <el-option
                    v-for="item in orgList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="guanzhanSearchInput"
                  @input="handleGuanzhanSearch"
                  placeholder="搜索"
                ></el-input>
                <el-checkbox-group v-model="ruleForm.spectatorIds">
                  <el-checkbox
                    v-for="personl in guanzhanPersonlShowList"
                    :key="personl.id"
                    :label="personl.id"
                  >{{ personl.name }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitClose">取消</el-button>
        <el-button type="primary" @click="emitSave">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 添加/编辑角色名称 -->
    <el-dialog
      append-to-body
      width="500px"
      :title="title2"
      :visible.sync="dialogValue2"
      @close="dialogValue2 = false"
      custom-class="drill-setting-dialog"
    >
      <el-form
        ref="formRef2"
        label-position="left"
        :model="ruleForm2"
        :rules="rules2"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm2.roleName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitCloseRole">取消</el-button>
        <el-button type="primary" @click="emitSaveRole">保 存</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import { drillSettingAPI as request, dictAPI } from "@/api";
import curd from "@/mixins/curd";
import { getOrg, getUser } from "@/utils";
import { mapGetters } from "vuex";
export default {
  mixins: [curd],
  data() {
    return {
      request: request,
      tableData: [],
      columns: [
        { prop: "maneuverName", label: "演习科目" },
        { prop: "principalName", label: "演习负责人" },
        { prop: "orgName", label: "所属机构" },
        { prop: "maneuverReleaseStatusText", label: "发布状态" },
        { prop: "createTime", label: "创建时间" },
      ],
      ruleForm: {
        maneuverId: "",
        planManeuverTime: "",
        directorIds: [], // 导调人员
        participants: [
          {
            teamName: "红方",
            groups: [],
          },
          {
            teamName: "蓝方",
            groups: [],
          },
        ], // 参战人员
        spectatorIds: [], // 观战人员
      },
      resetForm: {
        maneuverId: "",
        planManeuverTime: "",
        directorIds: [], // 导调人员
        participants: [
          {
            teamName: "红方",
            groups: [],
          },
          {
            teamName: "蓝方",
            groups: [],
          },
        ], // 参战人员
        spectatorIds: [], // 观战人员
      },
      rules: {
        planManeuverTime: [{ required: true, message: "计划演习时间不能为空" }],
      },
      principalOptions: [],
      activeName: "1",
      // 角色
      roleList: [],
      currentRole: "",
      // 组
      groupShow: false,
      currentGroup: {},
      // 关联角色人员
      groupOrgId: "",
      searchPersonl: "",
      personlCheckList: [],
      personlList: [],
      personlShowList: [],
      // 导调人员
      daodiaoOrgId: "",
      daodiaoSearchInput: "",
      daodiaoPersonlShowList: [],
      daodiaoPersonlList: [],
      // 观战人员
      guanzhanOrgId: "",
      guanzhanSearchInput: "",
      guanzhanPersonlShowList: [],
      guanzhanPersonlList: [],
      // 角色
      ruleForm2: {
        roleName: "",
      },
      rules2: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      dialogValue2: false,
      isAddRole: true,
      currentEditRoleName: "",
    };
  },
  computed: {
    ...mapGetters(["userList", "orgList"]),
    title() {
      return "设置演习";
    },
    title2() {
      return this.isAddRole ? "新增角色" : "编辑角色";
    },
    currentRoleGroups() {
      let findItem = this.ruleForm.participants.find(
        (el) => el.teamName === this.currentRole
      );
      if (!findItem) return [];
      return findItem.groups;
    },
    totalPersonlsSize() {
      let size = 0;
      let findItem = this.ruleForm.participants.find(
        (el) => el.teamName === this.currentRole
      );
      if (!findItem) return size;
      findItem.groups.forEach((el) => {
        size += el.participantIds.length;
      });
      return size;
    },
  },
  methods: {
    formatTableData(tableData) {
      tableData.forEach((el) => {
        el.maneuverReleaseStatusText = "";
        if (el.maneuverReleaseStatus == 0) {
          el.maneuverReleaseStatusText = "未发布";
        } else if (el.maneuverReleaseStatus == 1) {
          el.maneuverReleaseStatusText = "已发布";
        }
      });
    },
    onSetting(rowItem) {
      this.request.read(rowItem.id).then((res) => {
        if (res) {
          const participants = res.participants || [];
          participants.forEach((pItem) => {
            pItem.groups.forEach((gItem) => {
              gItem.show = false
              gItem.participantIds = gItem.participantIds
                .map((el) => {
                  return getUser(el);
                })
                .filter((el) => el);
            });
          });
          this.daodiaoPersonlShowList = (res.directorIds || [])
            .map((el) => {
              return getUser(el);
            })
            .filter((el) => el);
          this.guanzhanPersonlShowList = (res.spectatorIds || [])
            .map((el) => {
              return getUser(el);
            })
            .filter((el) => el);
          this.ruleForm = {
            maneuverId: rowItem.id,
            planManeuverTime: res.planManeuverTime,
            directorIds: res.directorIds || [],
            participants: participants,
            spectatorIds: res.spectatorIds || [],
          };
        } else {
          this.ruleForm = {
            maneuverId: rowItem.id,
            planManeuverTime: "",
            directorIds: [], // 导调人员
            participants: [
              {
                teamName: "红方",
                groups: [],
              },
              {
                teamName: "蓝方",
                groups: [],
              },
            ], // 参战人员
            spectatorIds: [], // 观战人员
          };
        }
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
        });
        if (this.ruleForm.participants && this.ruleForm.participants.length) {
          this.currentRole = this.ruleForm.participants[0].teamName;
        }
        this.dialogValue = true;
      });
    },
    onPublish(rowItem) {
      this.$confirm(
        rowItem.maneuverReleaseStatus == 0
          ? "确定要发布演习吗？若发布演习，相关受邀人员将会收到演习任务提醒"
          : "确定要取消发布演习吗？",
        this.$t("base.tooltip"),
        {
          confirmButtonText: this.$t("base.button.ok"),
          cancelButtonText: this.$t("base.button.cancel"),
          type: "success",
        }
      )
        .then(() => {
          this.request
            .publish({
              maneuverId: rowItem.id,
              maneuverReleaseStatus:
                rowItem.maneuverReleaseStatus == 0 ? "1" : "0",
            })
            .then((res) => {
              this.$message.success("成功");
              this.onSearch();
            });
        })
        .catch(() => {
          this.$message.info("取消成功");
        });
    },
    // 添加/编辑角色
    handleChangeRole(name) {
      this.currentRole = name;
    },
    handleAddRole() {
      this.currentEditRoleName = "";
      this.isAddRole = true;
      this.ruleForm2 = {
        roleName: "",
      };
      this.dialogValue2 = true;
    },
    handleEditRole(name) {
      this.currentEditRoleName = name;
      this.isAddRole = false;
      this.ruleForm2 = {
        roleName: name,
      };
      this.dialogValue2 = true;
    },
    handleDeleteRole(name) {
      const index = this.ruleForm.participants.findIndex(
        (el) => el.teamName === name
      );
      if (index > -1) {
        this.ruleForm.participants.splice(index, 1);
        if (this.currentRole === name) {
          this.currentRole = "";
        }
      }
    },
    emitCloseRole() {
      this.dialogValue2 = false;
    },
    emitSaveRole() {
      this.$refs.formRef2.validate((valid) => {
        if (valid) {
          if (this.isAddRole) {
            if (
              this.ruleForm.participants.filter(
                (el) => el.teamName === this.ruleForm2.roleName
              ).length
            ) {
              return;
            }
            this.ruleForm.participants.push({
              teamName: this.ruleForm2.roleName,
              groups: [],
            });
            this.dialogValue2 = false;
            this.ruleForm2.roleName = "";
          } else {
            if (
              this.ruleForm.participants.filter(
                (el) => el.teamName === this.ruleForm2.roleName
              ).length > 1
            ) {
              return;
            }
            let findItem = this.ruleForm.participants.find(
              (el) => el.teamName === this.currentEditRoleName
            );
            if (!findItem) return;
            findItem.teamName = this.ruleForm2.roleName;
            // 如果当前选中的名称是被修改的角色名称 则改变默认选中的值
            if (this.currentRole === this.currentEditRoleName) {
              this.currentRole = this.ruleForm2.roleName;
            }
            this.dialogValue2 = false;
            this.ruleForm2.roleName = "";
          }
        }
      });
    },
    // 添加人员
    hideAddPersonl() {
      this.searchPersonl = "";
      this.personlCheckList = [];
    },
    showAddPersonl() {
      console.log("初始化");
      if (!this.groupOrgId) {
        this.groupOrgId = this.orgList[0].id;
      }
      this.handleChangeGroupOrg(this.groupOrgId);
    },
    async handleChangeGroupOrg(org) {
      console.log("机构选择变化");
      this.searchPersonl = "";
      this.personlList = (await dictAPI.getUserListByOrgId(org)).rows || [];
      this.handleAddSearchInput(this.searchPersonl);
      // 默认全选
      this.personlCheckList = this.personlShowList.map((el) => el.id);
    },
    handleAddSearchInput(value) {
      this.personlShowList = this.personlList
        .filter(
          (el) =>
            this.ruleForm.participants.every((el2) =>
              el2.groups.every((el3) =>
                el3.participantIds.every((el4) => el4.id !== el.id)
              )
            ) &&
            this.ruleForm.directorIds.every((el5) => el5 !== el.id) &&
            this.ruleForm.spectatorIds.every((el6) => el6 !== el.id)
        )
        .filter((el) => el.name.includes(value));
    },
    handleAddSavePersonl() {
      if (!this.personlCheckList.length) return;
      let findItem = this.ruleForm.participants.find(
        (el) => el.teamName === this.currentRole
      );
      if (!findItem) return this.$message.error("请选中角色");
      findItem.groups.push({
        groupName: findItem.teamName + (findItem.groups.length || 1),
        participantIds: this.personlList.filter((el) =>
          this.personlCheckList.find((id) => id === el.id)
        ),
      });
      this.showAddPersonl();
      this.addPersonlShow = false
    },
    handleAddGroup() {
      let findItem = this.ruleForm.participants.find(
        (el) => el.teamName === this.currentRole
      );
      if (!findItem) return this.$message.error("请选中角色");
      this.groupShow = true
      findItem.groups.push({
        show: false,
        participantIds: []
      });
    },
    // 编辑人员
    hideEditPersonl() {
      this.searchPersonl = "";
      this.personlCheckList = [];
    },
    showEditPersonl() {
      console.log("初始化");
      if (!this.groupOrgId) {
        this.groupOrgId = this.orgList[0].id;
      }
      this.handleChangeGroupOrg(this.groupOrgId);
    },
    handleEditSearchInput(value) {
      this.personlShowList = this.personlList
        .filter(
          (el) =>
            this.ruleForm.participants.every((el2) =>
              el2.groups.every((el3) =>
                el3.participantIds.every((el4) => el4.id !== el.id)
              )
            ) &&
            this.ruleForm.directorIds.every((el5) => el5 !== el.id) &&
            this.ruleForm.spectatorIds.every((el6) => el6 !== el.id)
        )
        .filter((el) => el.name.includes(value));
    },
    handleEditSavePersonl(group) {
      if (!this.personlCheckList.length) return;
      group.participantIds = [
        ...group.participantIds,
        ...this.personlList.filter((el) =>
          this.personlCheckList.find((id) => id === el.id)
        ),
      ];
      this.showEditPersonl();
      group.show = false
    },
    handleDeleteGroup(groupIndex) {
      let findItem = this.ruleForm.participants.find(
        (el) => el.teamName === this.currentRole
      );
      if (!findItem) return;
      findItem.groups.splice(groupIndex, 1);
    },
    handleCloseTag(groupIndex, tagIndex) {
      let findItem = this.ruleForm.participants.find(
        (el) => el.teamName === this.currentRole
      );
      if (!findItem) return;
      if (
        tagIndex === 0 &&
        findItem.groups[groupIndex].participantIds.length === 1
      ) {
        findItem.groups.splice(groupIndex, 1);
        return;
      }
      findItem.groups[groupIndex].participantIds.splice(tagIndex, 1);
    },
    // 添加导调
    async handleChangeDaodiaoOrg(org) {
      console.log("机构选择变化");
      this.daodiaoSearchInput = "";
      this.daodiaoPersonlList =
        (await dictAPI.getUserListByOrgId(org)).rows || [];
      this.handleDaodiaoSearch(this.daodiaoSearchInput);
    },
    handleDaodiaoSearch(value) {
      this.daodiaoPersonlShowList = this.daodiaoPersonlList
        .filter(
          (el) =>
            this.ruleForm.participants.every((el2) =>
              el2.groups.every((el3) =>
                el3.participantIds.every((el4) => el4.id !== el.id)
              )
            ) && this.ruleForm.spectatorIds.every((el6) => el6 !== el.id)
        )
        .filter((el) => el.name.includes(value));
    },
    // 添加观战
    async handleChangeGuanzhanOrg(org) {
      console.log("机构选择变化");
      this.guanzhanSearchInput = "";
      this.guanzhanPersonlList =
        (await dictAPI.getUserListByOrgId(org)).rows || [];
      this.handleGuanzhanSearch(this.guanzhanSearchInput);
    },
    handleGuanzhanSearch(value) {
      this.guanzhanPersonlShowList = this.guanzhanPersonlList
        .filter(
          (el) =>
            this.ruleForm.participants.every((el2) =>
              el2.groups.every((el3) =>
                el3.participantIds.every((el4) => el4.id !== el.id)
              )
            ) && this.ruleForm.directorIds.every((el5) => el5 !== el.id)
        )
        .filter((el) => el.name.includes(value));
    },
    emitSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (
            !this.ruleForm.participants ||
            this.ruleForm.participants.length < 2
          ) {
            return this.$message.error("至少创建两组人员");
          }
          if (
            !this.ruleForm.participants ||
            this.ruleForm.participants.length > 8
          ) {
            return this.$message.error("最多创建八组人员");
          }
          if (
            this.ruleForm.participants.some(
              (el) =>
                !el.groups ||
                !el.groups.length ||
                el.groups.some(
                  (el2) => !el2.participantIds || !el2.participantIds.length
                )
            )
          ) {
            return this.$message.error("组内人员不能为空");
          }
          if (!this.ruleForm.directorIds.length) {
            return this.$message.error("导调人员不能为空");
          }
          // 表单数据格式化
          let formData = JSON.parse(JSON.stringify(this.ruleForm));
          formData.participants.forEach((pItem) => {
            pItem.groups.forEach((gItem, gIndex) => {
              gItem.groupName = gIndex + 1
              gItem.participantIds = gItem.participantIds.map((el) => el.id);
              gItem.show = undefined
            });
            pItem.groups = pItem.groups.filter(el => el.participantIds && el.participantIds.length)
          });
          this.request.update({ ...formData }).then((res) => {
            this.onSearch();
            this.emitClose();
          });
        }
      });
    },
  },
};
</script>
<style lang="less" >
.drill-setting-dialog {
  .el-card {
    height: 420px;
  }
  .card-left {
    width: 220px;
    height: 420px;
    .el-card__header {
      height: 40px;
      padding: 0 13px;
    }
    .card-left-header {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .role-list {
      overflow: hidden;
    }
    .el-card__body {
      padding: 10px 0;
      overflow: auto;
    }
    .role-item {
      width: 220px;
      height: 42px;
      padding: 0 19px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-left: 2px solid transparent;
      cursor: pointer;
      &.is-active {
        span {
          color: #00a56d;
          font-weight: bold;
        }
        background: rgba(0, 165, 109, 0.05);
        border-left: 2px solid #00a56d;
      }
      .el-button {
        transform: rotate(90deg);
      }
      .el-button [class*="el-icon-"] + span {
        margin-left: 10px;
      }
    }
  }
  .card-right {
    margin-left: 18px;
    flex-grow: 1;
    height: 420px;
    .el-card__header {
      height: 40px;
      padding: 0 13px;
    }
    .card-right-header {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-right-header2 {
      height: 44px;
      padding: 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      > * {
        color: #333333;
      }
    }
    .el-card__body {
      padding: 0;
      overflow: auto;
    }
    .personl-item {
      display: flex;
      align-items: center;
      padding-top: 18px;
    }
  }
  .el-checkbox-group {
    display: flex;
    flex-direction: column;
    .el-checkbox {
      margin-top: 9px;
      .el-checkbox__label {
        color: color1;
      }
    }
  }
}
.add-personl-popover {
  .el-checkbox {
    margin-top: 9px;
    .el-checkbox__label {
      color: color1;
    }
  }
}
</style>
